<template>
  <div>
    <div>
        <!-- 头部导航 -->
        <div>
            <van-nav-bar
                title="疾病百科"
                left-text="返回"
                left-arrow
                />
        </div>
        <!-- 头部导航 -->


        <!-- tab标签 -->
        <div>
            <van-tabs v-model="active">
            <van-tab title="常见疫病"></van-tab>
            <van-tab title="传染病"></van-tab>
            <van-tab title="重大疾病"></van-tab>
            </van-tabs>
        </div>
        <!-- tab标签 -->

        <!-- 主体部分 -->
        <div class="zhu">
            <!-- 病毒类型 -->
            <div class="bing">
                <van-button type="info" size="mini" color="#c4c3c3" class="marle">全部</van-button>
                <van-button type="info" size="mini" color="#c4c3c3" class="marle">甲类传染病</van-button>
                <van-button type="info" size="mini" class="marle">乙类传染病</van-button>
                <van-button type="info" size="mini" color="#c4c3c3" class="marle">丙类传染病</van-button>
            </div>
            <!-- 病毒类型 -->

            <!-- 列表区域 -->
            <div>
                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>
                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>

                <div class="fle jus jus2 lis">

                    <div class="fle">
                        <div>
                            <van-image
                                round
                                width="70px"
                                height="70px"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                />
                        </div>
                        <div class="tes">
                            新型冠状病毒
                        </div>
                    </div>


                    <div class="jus2">></div>
                </div>
            </div>
            <!-- 列表区域 -->
        </div>
        <!-- 主体部分 -->

    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            active:1
        }
    }

}
</script>

<style lang="less" scoped>
.zhu{
    width: 380px;
    height: 754px;
    // background-color: red;
    margin: auto;
}
.bing{
    width: 380px;
    height: 30px;
    margin: 20px 0;
}
.marle{
    margin-left: 20px;
}
.fle{
    display: flex;
}
.jus{
    justify-content: space-between;
}
.jus2{
    align-items: center;
}
.tes{
    height: 74px;
    line-height: 74px;
}
.lis{
    margin: auto;
    width: 380px;
    height: 85px;
    border-bottom: 1px solid #EFEEEE ;
}
</style>